<template>
	<!-- <view class="u-page"> -->
	   <!-- <view class="u-demo-block">
	      <view class="u-demo-block__content">
	        <view class="album">
	          <view class="album__content">
	            <u-album :urls="photoList" multipleSize='170' space='16' rowCount='2'>
				</u-album>
				<switch-page :totalPages='5' :currentPage='1'></switch-page>
	          </view>
	        </view>
	      </view>
	    </view>
	  </view> -->
	  <view >
	  	<view class="photo">
	  		<view class="photo-list" v-for='(item, index) in photoList' :key="index" >
	  				<u-image class='photo-src'  
					@click="handleImg(item)"
	  				width="170"
	  				height='170'
	  				 :src="item.src" :lazy-load="true">
	  				</u-image>
	  				<view class="photo-title" >
	  					{{item.title}}
	  				</view>
	  		</view>
	  	</view>
		<switch-page :totalPages='5' :currentPage='1'></switch-page>
	  </view>
	  
	  
</template>

<script>
	import switchPage from '../../components/switchPage.vue'
	export default {
		components:{switchPage},
		data() {
			return {
				photoList: [{
					title: '图片标题',
					src: 'https://cdn.uviewui.com/uview/album/1.jpg'
				}, {
					title: '图片标题',
					src: 'https://cdn.uviewui.com/uview/album/1.jpg'
				}, {
					title: '图片标题',
					src: 'https://cdn.uviewui.com/uview/album/1.jpg'
				}, {
					title: '图片标题',
					src: 'https://cdn.uviewui.com/uview/album/1.jpg'
				}, {
					title: '图片标题',
					src: 'https://cdn.uviewui.com/uview/album/1.jpg'
				}, {
					title: '图片标题',
					src: 'https://cdn.uviewui.com/uview/album/1.jpg'
				}, {
					title: '图片标题',
					src: 'https://cdn.uviewui.com/uview/album/1.jpg'
				}, {
					title: '图片标题',
					src: 'https://cdn.uviewui.com/uview/album/1.jpg'
				}, {
					title: '图片标题',
					src: 'https://cdn.uviewui.com/uview/album/1.jpg'
				}, {
					title: '图片标题',
					src: 'https://cdn.uviewui.com/uview/album/1.jpg'
				}, ]
			}
		},
		methods: {
			handleImg(val) {
				// 预览图片
				uni.previewImage({
					urls: [val.src],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.photo {
		display: grid;
		grid-template-columns: repeat(2, 45%);
		grid-gap:30rpx;
		justify-content: center;
		align-content: center;
		.photo-list{
			position: relative;
			margin: 10rpx 0;
			.photo-title {
				font-size: 13px;
				text-align: center;
				width: 170px;
				height: 50rpx;
				line-height: 50rpx;
				background-color: black;  
				opacity: 0.6;
				position: absolute;
				bottom: 0;
				color: #fff
			}
		}
	}
	
</style>
